<template>
  <div class="box">
    <div class="title">账号基本资料</div>

    <el-descriptions class="margin-top" :column="3" border size="mini">
      <el-descriptions-item>
        <template slot="label">
          <div class="text-center">用户名</div>
        </template>
        <el-input placeholder="" :value="fromData.username"></el-input>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <div class="text-center">姓名</div>
        </template>
        <el-input placeholder="" :value="fromData.name"></el-input>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <div class="text-center">将此账号菜单复制到该账号</div>
        </template>

        <el-select v-model="value" filterable placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>

        <el-button type="primary" plain class="ml-1">确定复制</el-button>
        <el-button type="primary" plain>复制到本驾校所有账号</el-button>
      </el-descriptions-item>
    </el-descriptions>

    <div>
      <div class="title mt-3">菜单列表</div>
      <div class="d-flex">
        <el-input placeholder="输入关键字进行过滤" :value="fromData.username" style="width: 400px;"></el-input>
        <el-button  class="ml-1" type="info" plain>初始化/恢复默认菜单</el-button>
        <el-button type="info" plain>加载菜单新增差异</el-button>
      </div>
    </div>

    <div class="mt-2">
      <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]"
        :props="defaultProps">
      </el-tree>
    </div>
  </div>
</template>

<script>
/**
* @author        chenRong
* @time          2023-11-03 15:01:58  星期五
* @description   
**/

export default {
  data() {
    return {
      fromData: {
        name: '',
        userName: ""
      },
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '奥利奥'
        }
      ],
      value: "",
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  
},
methods: {

}
}
</script>

<style lang="scss" scoped>
.box {
  background-color: white;
  padding: 0px;
  height: 810px;
}
.title {
  margin-bottom: 20px;
  color: #333;
}
</style>